<template>
    <div class="wrapper">
        <div class="header">
            <text class="headerword">{{header}}</text>
        </div>

        <div class="nav">
            <text @click="jump('home')" :class="[selectpath=='home'?'nav-item':'nav-item-normal']">主页</text>
            <text @click="jump('recommend')" :class="[selectpath=='recommend'?'nav-item':'nav-item-normal']">推荐</text>
            <text @click="jump('qa')" :class="[selectpath=='qa'?'nav-item':'nav-item-normal']">问答</text>
        </div>
        <router-view class="template"></router-view>
    </div>
</template>

<script>
  const stream = weex.requireModule('stream');
  console.log('welcome')
  console.log(stream);
  export default {
    name: 'router',
    data:{
      header:'码学',
      selectpath:'home'
    },

    created : function(){
      var me = this;
      stream.fetch({
        method: 'GET',
        type: 'text',
        // url: 'https://api.github.com/repos/alibaba/weex'
        url: 'http://193.112.145.13/wyz'
        // url:'https://kitsu.io/api/edge/anime?filter%5Bstatus%5D=current&sort=-userCount&page%5Blimit%5D=20'
      }, function(ret) {

        if(!ret.ok){
          console.log('fail-----------')
          console.log(JSON.stringify(ret))
          // me.getResult = "request failed";

          // modal.toast({
          //   'message': "失败",
          //   'duration': 2.0
          // })
        }else{
          console.log('success------------');
          // console.log(JSON.stringify(ret))

          // me.getResult = JSON.stringify(ret);

          // modal.toast({
          //   message: JSON.stringify(ret),
          //   duration: 2.0
          // })
        }
      })
    },


    methods:{
      jump:function(e){
        switch(e){
          case 'home':
            this._data.header = '码学';
            break;
          case 'recommend':
            this._data.header = '推荐';
            break;
          case 'qa':
            this._data.header = '问答';
            break;
        }
        this.$router.push(e);
        // this.$router.push(e).catch(err => { console.log(err) });
        this._data.selectpath = e;
      }
    }
  }
</script>


<style scoped>
    .wrapper{
        width:750px;
    }

    .header{
        width:750px;
        height:80px;
        background-color: white;
        justify-content: center;
    }
    .headerword{
        height:60px;
        font-size: 60px;
        border-bottom: 1px solid black;
        align-items: center;
        text-align: center;
    }
    .nav{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 750px;
        height: 90px;
        position: fixed;
        bottom: 0px;
        z-index: 99;
        background-color: white;
    }
    .nav-item{
        width: 250px;
        line-height: 80px;
        height: 80px;
        color: blue;
        text-align: center;
        font-size: 40px;
    }

    .nav-item-normal{
        width: 250px;
        line-height: 80px;
        height: 80px;
        color: black;
        text-align: center;
        font-size: 40px;
    }
</style>
